import React, { Component } from 'react'
import { iconUrl } from '../../../utlis/icons'
import { createFromIconfontCN } from '@ant-design/icons';
import { withRouter } from 'react-router-dom';
import './person.less';
const IconFont = createFromIconfontCN({
  scriptUrl: iconUrl
});



class person extends Component {

  render() {
    return (
      <>
        {
          this.props.personalized.map((v, i) => {
            return <div className="item" key={i} onClick={() => {
              this.props.history.push(`/playlists/${v.id}`)
            }}>
              <div className="img-warp">
                <div className="num-warp">
                  <span className="num">{v.copywriter}</span>
                </div>
                <img src={v.picUrl} alt="" />
                <span className="iconfonts">
                  <IconFont type="iconbofang6" />
                </span>
              </div>
              <p className="name">{v.name}</p>
            </div>
          })
        }
      </>
    )
  }
}

export default withRouter(person)